
/**
 * Created by yoyoyk on 2017/5/10.
 *  纯UI组件，无状态组件，只接受数据，与UI层展示
 */
import React from "react";
import {Icon,Input} from 'antd';
import {Button} from 'fly';
/**
 *
 * 组件内全部为view层ui组件，无状态组件
 * @param props
 * @returns {XML}
 * @constructor
 */

export function Header (props){
    const {No1,No2}  = props;
    return (
        <header className={props.className}>
            <Button onClick={No1} type="blank">
                <Icon type="plus"/>
                添加图片
            </Button>
        </header>
    )
}

export function PackList (props){
    const {downLoad,remove} = props;
    return(
        <ul>
            {
                props.data.map((item,index)=>
                    <li key={index}>
                        <span> {item.title} </span>
                        <div>
                            <span onClick={()=>downLoad(index)}> 下载 </span>
                            <span onClick={()=>remove(index)}> 删除 </span>
                        </div>
                    </li>
                )
            }
        </ul>
    )
}


export function ViewImgList(props){

    const progress = props.progress;

    return(
        <div className={ (props.transClass || " ") + " packagSteps_pic_List-item"}>
            <div className="packagSteps_picList_Item">
                <span className="packagSteps_updata">
                    <div className="ant-upload-list ant-upload-list-picture-card">
                        <div className="ant-upload-list-item ant-upload-list-item-done">
                            <div className="ant-upload-list-item-info">
                                <span>
                                    <a className="ant-upload-list-item-thumbnail" href="" target="_blank" rel="noopener noreferrer">
                                        <img src={props.imgSrc} title={props.imgName} alt={props.imgName} />
                                    </a>
                                    {
                                        progress != null &&
                                        <span className="production_upload_progress" title="进度">
                                            <i style={{width:`${progress}%`}}></i>
                                        </span>
                                    }

                                </span>
                            </div>
                            <span className="ant-upload-list-item-actions">
                                <a target="_blank" rel="noopener noreferrer" title="预览文件" href="javascript:;">
                                    <i className="anticon anticon-eye-o" onClick={props.handlePreview}></i>
                                </a>
                                <i title="删除文件" className="anticon anticon-delete" onClick={props.handleRemove}></i>
                            </span>
                        </div>
                    </div>
                </span>
            </div>
            {/*textare 输入 a*/}
            <div className="packagSteps_textarea_Item">
                {
                    <Input type="textarea"  disabled={true} row="3" value={props.textValue} />
                }
            </div>
        </div>
    )
}

export function ViewAAddImg(props){
    return (
        <div className="ant-upload ant-upload-select ant-upload-select-picture-card" onClick={props.onClick}>
            <span tabindex="0" className="ant-upload" role="button">
                <div>
                    <i className="anticon anticon-plus"></i>
                    <div className="ant-upload-text">添加图片</div>
                </div>
            </span>
        </div>
    )
}